<template>
  <div class="contents">
    <div class="box_top">
      <el-row :gutter="10">
        <el-col :span="12">
          <span class="titel_font">传感器</span>
        </el-col>
        <el-col :span="12">
          <el-button type="primary" icon="el-icon-plus" size="small" @click="addSensor">新增传感器</el-button>
        </el-col>
      </el-row>
      <!-- 表格 -->
      <el-table :data="tableData_onelist" :header-cell-style="{background: '#8595B9',color: '#fff',height:'44px'}"
        class="table table_list" stripe size="small">
        <el-table-column prop="name" label="设备名称"></el-table-column>
        <!-- <el-table-column prop="deviceType" label="设备类型">
          <template slot-scope="scope">
            <span v-if="scope.row.deviceType === 0">停用</span>
            <span v-else>启用</span>
          </template>
        </el-table-column>-->
        <!-- <el-table-column prop="status" label="运行状态"></el-table-column> -->
        <el-table-column prop="code" label="型号"></el-table-column>
        <el-table-column prop="remark" label="备注"></el-table-column>
        <el-table-column label="开关">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.status" active-color="#13ce66" inactive-color="#ff4949"
              @change="onChangeSwitch(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-tooltip content="修改">
              <el-button type="text" icon="el-icon-edit-outline" @click="handleEdit(scope.row)"></el-button>
            </el-tooltip>
            <el-tooltip content="删除">
              <el-button type="text" icon="el-icon-delete" style="color:red !important"
                @click="handleDelete(scope.$index, scope.row)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="box_top">
      <el-row :gutter="10">
        <el-col :span="12">
          <span>传感器维修信息</span>
          <div></div>
        </el-col>
      </el-row>
      <!-- 表格 -->
      <el-table :data="tableData_two" :header-cell-style="{background: '#8595B9',color: '#fff',height:'44px'}" stripe size="small">
        <el-table-column prop="date" label="损坏原因"></el-table-column>
        <el-table-column prop="name" label="损坏时间"></el-table-column>
        <el-table-column prop="address" label="维修时间"></el-table-column>
        <el-table-column prop="address" label="维修人员"></el-table-column>
        <el-table-column prop="address" label="维修描述"></el-table-column>
        <el-table-column prop="address" label="维修厂家"></el-table-column>
        <el-table-column prop="address" label="联系方式"></el-table-column>
      </el-table>
    </div>
    <!-- 弹窗 -->
    <!-- 弹窗传感器 -->
    <vx-popup :title="CollectorTitle" width="680px" @close="closeForm" :active.sync="cardDialogVisibleSensor"
      @confirmPopup="submitSensor" @cancelPopup="closeForm">
      <el-form :model="addCollectorRuleForm" :rules="addCollectorRules" ref="addRuleForm" label-width="120px"
        class="demo-ruleForm">
        <el-form-item label="设备名称：" prop="name">
          <el-input v-model="addCollectorRuleForm.name" placeholder="请输入..."></el-input>
        </el-form-item>
        <el-form-item label="运行状态：">
          <el-radio-group v-model="addCollectorRuleForm.status">
            <el-radio :label="1">开启</el-radio>
            <el-radio :label="0">关闭</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="设备类型：">
          <el-select v-model="addCollectorRuleForm.deviceType" placeholder="请选择活动区域">
            <el-option v-for="(item,index) in Typelist" :key="index" :label="item.dictName" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备编号：">
          <el-input v-model="addCollectorRuleForm.code" placeholder="请输入..."></el-input>
        </el-form-item>
        <el-form-item label="传感器位置：">
          <el-input v-model="addCollectorRuleForm.location" placeholder="请输入..."></el-input>
        </el-form-item>
        <el-form-item label="采集频率：">
          <el-input v-model="addCollectorRuleForm.deviceRate" placeholder="请输入..."></el-input>
        </el-form-item>
        <el-form-item label="通讯方式：">
          <el-input v-model="addCollectorRuleForm.communicateType" placeholder="请输入..."></el-input>
        </el-form-item>
        <el-form-item label="采集器地址：">
          <el-input v-model="addCollectorRuleForm.address" placeholder="请输入..."></el-input>
        </el-form-item>
        <el-form-item label="测点id：">
          <el-input v-model="addCollectorRuleForm.measurePointId" placeholder="请输入..."></el-input>
        </el-form-item>
        <el-form-item label="监测设备类别：">
          <el-input v-model="addCollectorRuleForm.monitorDeviceType" placeholder="请输入..."></el-input>
        </el-form-item>
        <el-form-item label="备注：">
          <el-input v-model="addCollectorRuleForm.remark" placeholder="请输入... 500字以内" type="textarea" :rows="3"
            maxlength="500"></el-input>
        </el-form-item>
      </el-form>
    </vx-popup>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        Typelist:[],
        cardDialogVisibleSensor: false,
        collectorOwnId: "", //采集器ownId
        collectorPId: "", //采集器pId
        cardDialogVisible: false,
        CollectorTitle: "新增采集器",
        //   新增采集器表单数据
        addCollectorRuleForm: {
          name: "",
          status: "",
          deviceType: "",
          code: "",
          remark: "",
        },
        //   新增采集器验证规则
        addCollectorRules: {
          name: [{
            required: true,
            message: "请输入活动名称",
            trigger: "blur"
          }],
          place: [{
            required: true,
            message: "请输入活动名称",
            trigger: "blur"
          }],
          model: [{
            required: true,
            message: "请输入活动名称",
            trigger: "blur"
          }],
          equipment: [{
            required: true,
            message: "请输入活动名称",
            trigger: "blur"
          }, ],
          vender: [{
            required: true,
            message: "请输入活动名称",
            trigger: "blur"
          }, ],
        },
      };
    },
    props: {
      tableData_onelist: {
        type: Array,
        required: true,
      },
      tableData_two: {
        type: Array,
        required: true,
      },
    },
    created() {
      this.getTypelist()
    },
    mounted() {},
    components: {},
    //   watch: {
    //     tableData_onelist: function (val, oldVal) {
    //       console.log(val);
    //       val.forEach((item, index) => {
    //         console.log(item.ownId, item.pId);
    //         this.collectorOwnId = item.ownId;
    //         this.collectorPId = item.pId;
    //       });
    //     },
    //   },
    methods: {
      getTypelist(){
      this.$api.bridge.getTypelist().then(res=>{
        this.Typelist = res.data.data
        // console.log(this.Typelist)
      })
    },
      submitSensor() {

      },
      // 调父组件刷新表格接口
      childMethod() {
        this.$emit("fatherMethod");
        console.log("99999999999999999999");
      },
      //   开关事件
      onChangeSwitch(val) {
        console.log(val.status);
      },
      // 新增传感器事件
      addSensor() {
        this.cardDialogVisibleSensor = true;
        this.CollectorTitle = "新增传感器";
        // this.addCollectorRuleForm = {};
        this.$refs.addRuleForm.resetFields();
      },
      // 关闭弹框
      closeForm() {
        this.cardDialogVisibleSensor = false;
        // this.$refs.addRefRuleForm.resetFields();
      },
      // 取消弹框
      closeForm() {
        this.cardDialogVisibleSensor = false;
        // this.$refs.addRefRuleForm.resetFields();
      },
      // 表格行编辑
      handleEdit(row) {
        // console.log(row);
        this.cardDialogVisible = true;
        this.addTitle = "修改测点";
        this.addRuleForm = {
          ...row
        };
        this.collectorid = row.id;
      },
      // 表格行删除
      handleDelete(index, row) {
        console.log(index, row.id);
        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            // 删除桥梁某工作站接口
            let params = {
              id: row.id,
            };
            this.$api.bridge.delCollector(params).then((res) => {
              if (res.data.success) {
                this.$vs.notify({
                  text: "删除工作站成功",
                  color: "success",
                  icon: "success",
                });
                this.getWorkstation();
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      },
      // 提交弹框
      submit() {
        this.cardDialogVisible = false;
        this.$refs.addRefRuleForm.validate((valid) => {
          console.log(valid);
          if (!valid) return;
          if (!this.collectorid) {
            // 新增采集器
            let params = {
              ...this.addCollectorRuleForm,
              ownId: this.collectorOwnId,
              pId: this.collectorPId,
            };
            this.$api.bridge.addCollector(params).then((res) => {
              // console.log(res,"////")
              if (res.data.success) {
                this.$vs.notify({
                  text: "添加工作站成功",
                  color: "success",
                  icon: "success",
                });
                this.childMethod();
              } else {
                let params = {

                }
                this.$api.bridge.editCollector().then(res => {
                  console.log(res, "mmmmmmmmmmm")
                })
              }
            });
          }
        });
      },
    },
  };

</script>
<style lang="scss" scoped>
  .contents {
    .box_top {
      .el-row {
        padding-bottom: 11px;
        margin-bottom: 11px;
        border-bottom: 1px solid #c6d3e1;

        .el-col-12:nth-child(1) {
          font-size: 16px;
          line-height: 32px;
          color: #327bdc;
        }

        .el-col-12:nth-child(2) {
          text-align: right;
        }
      }

      .table_list {
        margin-bottom: 30px;
      }
    }

    /deep/.el-select {
      width: 463px;
    }
  }

</style>
